<template>
  <view class="promotion-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 顶部收益卡片 -->
    <view class="earnings-card">
      <view class="total-earnings">
        <text class="label">累计收益(元)</text>
        <text class="amount">{{totalEarnings}}</text>
      </view>
      <view class="earnings-details">
        <view class="detail-item">
          <text class="value">{{monthEarnings}}</text>
          <text class="label">本月收益</text>
        </view>
        <view class="detail-item">
          <text class="value">{{inviteCount}}</text>
          <text class="label">邀请人数</text>
        </view>
        <view class="detail-item">
          <text class="value">{{orderCount}}</text>
          <text class="label">订单数量</text>
        </view>
      </view>
      <view class="action-buttons">
        <view class="action-btn withdraw" @tap="handleWithdraw">
          <text>提现</text>
        </view>
        <view class="action-btn records" @tap="viewRecords">
          <text>收益明细</text>
        </view>
      </view>
    </view>

    <!-- 推广方式 -->
    <view class="section promotion-methods">
      <view class="section-title">
        <text class="main">推广方式</text>
        <text class="sub">PROMOTION METHODS</text>
      </view>
      <view class="method-list">
        <view class="method-item" v-for="(method, index) in methods" :key="index" @tap="handleMethodTap(method)">
          <image :src="method.icon" mode="aspectFit"></image>
          <view class="method-info">
            <text class="title">{{method.title}}</text>
            <text class="desc">{{method.desc}}</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 佣金规则 -->
    <view class="section commission-rules">
      <view class="section-title">
        <text class="main">佣金规则</text>
        <text class="sub">COMMISSION RULES</text>
      </view>
      <view class="rules-list">
        <view class="rule-item" v-for="(rule, index) in rules" :key="index">
          <view class="rule-header">
            <text class="title">{{rule.title}}</text>
            <text class="rate">{{rule.rate}}</text>
          </view>
          <text class="desc">{{rule.desc}}</text>
        </view>
      </view>
    </view>

    <!-- 推广二维码弹窗 -->
    <view class="qrcode-popup" v-if="showQRCode">
      <view class="popup-mask" @tap="closeQRCode"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="title">推广二维码</text>
          <text class="close" @tap="closeQRCode">×</text>
        </view>
        <image class="qrcode" :src="qrCodeUrl" mode="aspectFit"></image>
        <text class="tips">扫描二维码即可注册</text>
        <view class="save-btn" @tap="saveQRCode">
          <text>保存图片</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      totalEarnings: '0.00',
      monthEarnings: '0.00',
      inviteCount: 0,
      orderCount: 0,
      showQRCode: false,
      qrCodeUrl: '/static/collaborate/qrcode.png',
      methods: [
        {
          icon: '/static/collaborate/share.png',
          title: '分享链接',
          desc: '复制链接分享给好友'
        },
        {
          icon: '/static/collaborate/qrcode.png',
          title: '推广码',
          desc: '生成专属推广二维码'
        },
        {
          icon: '/static/collaborate/poster.png',
          title: '推广海报',
          desc: '生成精美推广海报'
        }
      ],
      rules: [
        {
          title: '直接推广',
          rate: '30%',
          desc: '直接推广新用户注册并完成首单，可获得订单金额30%的佣金'
        },
        {
          title: '间接推广',
          rate: '10%',
          desc: '间接推广用户完成订单，可获得订单金额10%的佣金'
        },
        {
          title: '会员卡收益',
          rate: '15%',
          desc: '推广用户购买会员卡，可获得会员卡金额15%的佣金'
        }
      ]
    }
  },
  onLoad() {
    this.loadPromotionData()
  },
  methods: {
    loadPromotionData() {
      // TODO: 从后端获取推广数据
      console.log('Loading promotion data')
    },
    handleWithdraw() {
      uni.navigateTo({
        url: '/pages/withdraw/withdraw',
        fail: (err) => {
          console.error('Navigation failed:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    viewRecords() {
      uni.navigateTo({
        url: '/pages/earnings-records/earnings-records',
        fail: (err) => {
          console.error('Navigation failed:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    handleMethodTap(method) {
      switch(method.title) {
        case '分享链接':
          this.copyPromotionLink()
          break
        case '推广码':
          this.showQRCode = true
          break
        case '推广海报':
          this.generatePoster()
          break
      }
    },
    copyPromotionLink() {
      const link = 'https://example.com/register?code=123456'
      uni.setClipboardData({
        data: link,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },
    generatePoster() {
      uni.showToast({
        title: '正在生成海报...',
        icon: 'loading'
      })
      // TODO: 实现海报生成逻辑
    },
    closeQRCode() {
      this.showQRCode = false
    },
    saveQRCode() {
      uni.saveImageToPhotosAlbum({
        filePath: this.qrCodeUrl,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          this.showQRCode = false
        },
        fail: () => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.promotion-container {
  min-height: 100vh;
  background: #F8F8F8;
  padding: 30rpx;

  .earnings-card {
    background: linear-gradient(135deg, #2B87FF 0%, #1a5cb3 100%);
    border-radius: 20rpx;
    padding: 40rpx;
    color: #FFFFFF;
    margin-bottom: 30rpx;

    .total-earnings {
      text-align: center;
      margin-bottom: 30rpx;

      .label {
        font-size: 28rpx;
        opacity: 0.9;
        display: block;
        margin-bottom: 10rpx;
      }

      .amount {
        font-size: 60rpx;
        font-weight: bold;
      }
    }

    .earnings-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40rpx;

      .detail-item {
        text-align: center;

        .value {
          font-size: 32rpx;
          font-weight: 500;
          display: block;
          margin-bottom: 8rpx;
        }

        .label {
          font-size: 24rpx;
          opacity: 0.9;
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 20rpx;

      .action-btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40rpx;
        font-size: 28rpx;

        &.withdraw {
          background: #FFFFFF;
          color: #2B87FF;
        }

        &.records {
          background: rgba(255, 255, 255, 0.2);
          color: #FFFFFF;
        }

        &:active {
          opacity: 0.9;
        }
      }
    }
  }

  .section {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
      text-align: center;
      margin-bottom: 30rpx;

      .main {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        display: block;
      }

      .sub {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }
    }
  }

  .method-list {
    .method-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      background: #F8F8F8;
      border-radius: 12rpx;
      margin-bottom: 20rpx;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .method-info {
        flex: 1;

        .title {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
          margin-bottom: 8rpx;
          display: block;
        }

        .desc {
          font-size: 24rpx;
          color: #666666;
        }
      }

      .arrow {
        color: #999999;
        font-size: 32rpx;
      }

      &:active {
        opacity: 0.9;
      }
    }
  }

  .rules-list {
    .rule-item {
      padding: 30rpx;
      background: #F8F8F8;
      border-radius: 12rpx;
      margin-bottom: 20rpx;

      .rule-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .title {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
        }

        .rate {
          font-size: 32rpx;
          color: #FF5733;
          font-weight: bold;
        }
      }

      .desc {
        font-size: 24rpx;
        color: #666666;
        line-height: 1.5;
      }
    }
  }

  .qrcode-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;

    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
    }

    .popup-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 40rpx;
      width: 560rpx;
      text-align: center;

      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }

        .close {
          font-size: 40rpx;
          color: #999999;
          padding: 10rpx;
        }
      }

      .qrcode {
        width: 400rpx;
        height: 400rpx;
        margin-bottom: 20rpx;
      }

      .tips {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 30rpx;
        display: block;
      }

      .save-btn {
        height: 88rpx;
        background: #2B87FF;
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: 500;

        &:active {
          opacity: 0.9;
        }
      }
    }
  }
}
</style> 